import { defineComponent, ref, h, DefineComponent, inject, } from "vue";
import { NCard, NButton, NSpace, NModal, FormItemRule, } from "naive-ui"
import Flexform, { flexformitem } from "@/components/flexform/index"
import useEditModel from "@/hooks/editModel"
export default defineComponent({
    name: "editModel",
    props: {
        close: {
            default: null,
            type: Function,
        }
    },
    setup(props, { expose }) {
        /**********************************************************************************
         * 从钩子函数引入必要的属性和方法
        ***********************************************************************************/
        const { showModel, handleInit, handleClose, handleReset, formValue, formRef, title, editType, resultText, loading, } = useEditModel(null, null, "", props.close)
        expose({ handleInit, handleClose, handleReset, formValue })

        /**********************************************************************************
         * 自定义的属性和方法
        ***********************************************************************************/
        const formList = ref([
            {
                span: 24,
                label: "父级菜单",
                key: "parent",
                default: "",
                type: "cascader",
                placeholder: "请选择父级菜单",
                rules: [{ require: true, message: "请选择父级菜单", trigger: "change", },],
            },
            {
                span: 24,
                label: "菜单名称",
                key: "name",
                default: "",
                type: "input",
                placeholder: "请输入名称",
                rules: [{ require: true, message: "请选择父级菜单", trigger: "change", }, { max: 50, min: 2, message: "请输入2-50位字符", trigger: "change" }],
            },
            {
                span: 24,
                label: "排序",
                key: "sort",
                default: "100",
                type: "input",
                placeholder: "请输入名称",
                rules: [{ require: true, message: "请选择父级菜单", trigger: "change", }, {
                    validator: (rules: FormItemRule, value: undefined | string) => {
                        const regx = /[1-9]\d*/
                        if (!value) {
                            return true
                        } else if (value.length > 10) {
                            return new Error("请输入10位以内的数字")
                        } else if (!regx.test(value)) {
                            return new Error("请输入数字")
                        } else {
                            return true
                        }
                    }
                }],
            },
            {
                span: 24,
                label: "分类",
                key: "fenlei",
                default: "",
                type: "radio",
                options: [{ label: "目录", value: "1" }, { label: "菜单", value: "2" },{ label: "外链菜单", value: "3" },],
                placeholder: "请选择分类",
                rules: [{ require: true, message: "请选择分类", trigger: "change", },],
            },
            {
                span: 24,
                label: "外联URL",
                key: "url",
                default: "",
                type: "input",
                placeholder: "请输入外链URL",
                rules: [{ require: true, message: "请输入外链URL", trigger: "change", },{validator: (rules:FormItemRule,value:undefined|string)=>{
                    const regx = /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/;
                    if(!value){
                        return true
                    }else if(value.length > 500){
                        return new Error("url地址过长，换一个短的吧")
                    }else if(!regx.test(value)){
                        return new Error("请输入合法的URL地址")
                    }else{
                        return true
                    }
                }}],
            },
            {
                span: 24,
                label: "侧边显示",
                key: "show",
                default: "",
                type: "radio",
                options: [{ label: "是", value: "1" }, { label: "否", value: "0" },],
                placeholder: "请选择是否侧边显示",
                rules: [{ require: true, message: "请选择是否侧边显示", trigger: "change", },],
            },
            {
                span: 24,
                label: "状态",
                key: "status",
                default: "",
                type: "radio",
                options: [{ label: "启用", value: "1" }, { label: "禁用", value: "0" },],
                placeholder: "请选择状态",
                rules: [{ require: true, message: "请选择状态", trigger: "change", },],
            },
            {
                span: 24,
                label: "描述",
                key: "desc",
                default: "",
                type: "textarea",
                placeholder: "请输入描述",
            },
        ])
        /**********************************************************************************
         * html和css
        ***********************************************************************************/
        const action = () => (<div class="flex justify-end items-center my-1">
            <NButton onClick={handleClose}>关闭</NButton>
            <NButton class="ml-10px" type={"primary"}>保存</NButton>
        </div>)
        const defaulthtml = () => (<div class="w-full flex flex-col">
            <NCard contentStyle={"padding:10px"} class="w-500px">
                <Flexform formValue={formValue.value} formList={formList.value} />
            </NCard>
        </div>)
        return () => (<NModal show={showModel.value} onUpdateShow={(val) => showModel.value = val} preset={"dialog"} title={title.value} showIcon={false} loading={loading.value} v-slots={{ header: null, action: action, default: defaulthtml, }}>
        </NModal>)
    },
})
